<form class="form-horizontal" novalidate name="forms.itemAkaForm" ng-submit="forms.itemAkaForm.$valid && ctrl.saveOrUpdateItemAka()">
    <div class="row form-group">
        <div class="col-md-2">
            <label>Tags:</label>
            <ui-select ng-model="itemAka.tag" style="border-radius: 4px;" required on-select="ctrl.selectTags($select.selected)">
                <ui-select-match>
                    <div ng-bind="$select.selected"></div>
                </ui-select-match>
                <ui-select-choices repeat="tag in ['Customer', 'Supplier', 'Brand', 'Retailer']">
                    <div ng-bind="tag"></div>
                </ui-select-choices>
            </ui-select>
        </div>
        <div class="col-md-4" ng-if="itemAka.tag">
            <div ng-if="itemAka.tag==='Supplier'">
                <label>Supplier:</label>
                <organization-auto-complete ng-model="itemAka.organizationId" tag="Supplier" allowClear="true" />
            </div>
            <div ng-if="itemAka.tag==='Brand'">
                <label>Brand:</label>
                <organization-auto-complete ng-model="itemAka.organizationId" tag="Brand" allowClear="true" />
            </div>
            <div ng-if="itemAka.tag==='Retailer'">
                <label>Retailer:</label>
                <organization-auto-complete ng-model="itemAka.organizationId" tag="Retailer" allowClear="true" />
            </div>
            <div ng-if="itemAka.tag==='Customer'">
                <label>Customer:</label>
                <organization-auto-complete ng-model="itemAka.organizationId" tag="Customer" ng-disabled="true"/>
            </div>
            <!--<div ng-if="!itemAka.tag">
                <label>Organization:</label>
                <organization-auto-complete ng-model="itemAka.organizationId" />
            </div>-->
        </div>
        <div class="col-md-3">
            <label>Key:</label>
            <input class="form-control" ng-model="itemAka.key" />
        </div>
        <div class="col-md-3">
            <label>Value:</label>
            <input class="form-control" ng-model="itemAka.value" required/>
        </div>
    </div>
    <div style="text-align: right;" permission-check="{{'item::itemSpec_write'}}">
        <waitting-btn type="submit" btn-class="btn blue" value="submitLabel" is-loading="loading"  ></waitting-btn>
        <button ng-click="ctrl.resetItemAka(forms.itemAkaForm)" type="button" class="btn grey">Reset</button>
    </div>
</form>
<div class="portlet light box-shadow-none" style="padding-left:0px; padding-right:0px;" ng-show="itemAkas.length > 0 ">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold uppercase">Item Akas</span>
        </div>
    </div>
    <div class="portlet-body">
        <div class="table-scrollable">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Tag</th>
                        <th>Organization</th>
                        <th>Key</th>
                        <th>Value</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="aka in itemAkas track by $index" ng-class="{'bg-light-green':hightLights[$index]}">
                        <td>{{aka.tag }}</td>
                        <td>{{akaOrganizationMap[aka.organizationId].name}}</td>
                        <td>{{aka.key}}</td>
                        <td>{{aka.value}}</td>
                        <td permission-check="{{'item::itemSpec_write'}}"><a ng-click="ctrl.editItemAka($index)"  >Edit</a> |
                            <a ng-click="ctrl.deleteItemAka($index)">Delete</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>